<template>
  <div class="event-deal">
    <header-bar :title="'事件查询'">
      <template v-slot:backBtn>
        <i @click="handleCloseWebView" class="iconarrow_back"></i>
      </template>
    </header-bar>
    <select-tab :showLine="true" :tabArr="tabArr" @selectTab="selectTab"></select-tab>
    <search-sc @handleSearch="handleSearch" v-model="searchVal" placeholder="搜索事件编号或描述"></search-sc>
    <cube-loading v-if="loading" class="loading-box"></cube-loading>
    <div class="event-list">
      <list-scroll
        :listData="listData"
        @handleToDetail="handleToDetail"
        @onPullingDown="onPullingDown"
        @onPullingUp="onPullingUp"
        :noMoreData="noMoreData"
        class="list"
      ></list-scroll>
    </div>
  </div>
</template>

<script>
import { closeWebView } from '@/common/js/android'
import { getAllEventList } from '@/api/eventAPI.js'
export default {
  data() {
    return {
      tabArr: [
        { label: '我经办的事件', selected: true },
        { label: '本中队的事件', selected: false }
      ],
      seleIndex: 0,
      noMoreData: false,
      searchVal: '',
      listData: [],
      total: 0,
      start: 1,
      eventSources: [],
      loading: false
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(window.localStorage.getItem('user'))
    }
  },
  beforeRouteEnter(to, from, next) {
    next(that => {
      that.getCaseList({
        start: that.start,
        appSearch: that.searchVal,
        type: that.seleIndex?'4':'0'
      })
    });
  },
  methods: {
    handleCloseWebView() {
      this.$router.go(-1)
      closeWebView()
    },
    selectTab(i){
      if(this.tabArr[i].selected)return;
      this.seleIndex = i
      for(let j = 0;j<this.tabArr.length;j++){
        if(i==j){
          this.tabArr[j].selected = true
        }else{
          this.tabArr[j].selected = false
        }
      }
      this.handleSearch()
    },
    handleSearch(){
      this.loading = true
      this.start=1
      this.noMoreData = false
      this.getCaseList({
        start: this.start,
        appSearch: this.searchVal,
        type: this.seleIndex?'4':'0'
      })
    },
    onPullingDown(){
      this.start=1
      this.noMoreData = false
      this.getCaseList({
        start: this.start,
        appSearch: this.searchVal,
        type: this.seleIndex?'4':'0'
      })
    },
    onPullingUp(){
      if(this.total<this.start*4){
        this.noMoreData = true
        this.listData = this.listData.concat([])
        return false;
      }
      this.start++
      this.getCaseList({
        start: this.start,
        appSearch: this.searchVal,
        type: this.seleIndex?'4':'0'
      })
    },
    async getCaseList(param){
      let data = {
        appSearch: param.appSearch,
        groupId: this.userInfo.groupId,
        userId: this.userInfo.userId,
        pageNum: param.start || 1,
        pageSize: 5,
        type: param.type
      }
      let res = await getAllEventList(data)
      this.loading = false
      if(res.code == 0 && res.data){
        this.listData = this.start === 1 ? res.data.list : this.listData.concat(res.data.list)
        this.total = res.data.total
        for(let i of this.listData) {
          this.$set(i, 'eventSource', i.eventSourceName)
        }
      } else {
        const toast = this.$createToast({
          txt: '请求失败',
          type: 'error'
        })
        toast.show()
        this.listData = []
        this.total = 0
      }
    },
    handleToDetail(data){
      let obj = {
        path: '/event-detail',
        query: {
          id: data.eventId
        }
      }
      this.$router.push(obj)
    },
  },
  components: {
    'header-bar': () => import('@/components/header-bar/header-bar'),
    'list-scroll': () => import('@/components/list-scroll/list-scroll'),
    'search-sc': () => import('@/components/search-sc/search-sc'),
    'select-tab': () => import('@/components/select-tab/select-tab'),
  },
}
</script>

<style lang="stylus" scoped>
.event-deal{
  width:100%;
  height: 100%;
  background:rgba(255,255,255,1);
  .event-list{
    height: 100%;
    position relative;
    .list{
      position absolute;    
      width: 100vw;
    }
  }
  .loading-box {
    position absolute
    top 140px
    left 49%
    z-index 100
  }
}
</style>
